HTML CSS JS

HTML Cheat Sheet CSS Cheat Sheet

Basics

Basic CSS code syntax

Syntax

selector{
property: value;
property2: value2;
}

Include external css file

<link rel="stylesheet" type="text/css" href="/style.css" />

Internal styles

<style type="text/css">
div { color: #444;}
</style>

Inline styles

<tag style="property: value"> </tag>

Clearfix

.clearfix:after {
clear: both;
content: " ";
display: block;
font-size: 0;
height: 0;
visibility: hidden;
}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

Box model

margin
border
padding
content

Useful Links

A list of other useful resources.
CSS Editor, Compressor CSS Cleaner Can I Use? Modernizr Bootstrap Validator Table CSS Styler

Selectors

Selectors specify which elements are targeted with a style
* all elements
div all div tags
div,p all divs and paragraphs
div p paragraphs inside divs
div > p all p tags, one level deep in div
div + p p tags immediately after div
div ~ p p tags preceded by div
.classname all elements with class
#idname element with ID
div.classname divs with certain classname
div#idname div with certain ID
#idname * all elements inside #idname

Pseudo classes

a:link link in normal state
a:active link in clicked state
a:hover link with mouse over it
a:visited visited link
p::after{content:"yo";}add content after p
p::before add content before p
input:checked checked inputs
input:disabled disabled inputs
input:enabled enabled inputs
input:focus input has focus
input:in-range value in range
input:out-of-range input value out of range
input:valid input with valid value
input:invalid input with invalid value
input:optional no required attribute
input:required input with requred attribute
input:read-only with readonly attribute
input:read-write no readonly attrib.
div:empty element with no children
p::first-letter first letter in p
p::first-line first line in p
p:first-of-type first of some type
p:last-of-type last of some type
p:lang(en) p with en language attribute
:not(span) element that's not a span
p:first-child first child of its parent
p:last-child last child of its parent
p:nth-child(2) second child of its parent
p:nth-child(3n+1) nth-child (an + b) formula
p:nth-last-child(2) second child from behind
p:nth-of-type(2) second p of its parent
p:nth-last-of-type(2) ...from behind
p:only-of-type unique of its parent
p:only-child only child of its parent
:root documents root element
::selection portion selected by user
:target highlight active anchor

Attribute selectors

a[target]links with a target attribute
a[target="_blank"] links which open in new tab
[title~="chair"] title element containing a word
[class^="chair"] class starts with chair
[class|="chair"] class starts with the chair word
[class*="chair"] class contains chair
[class$="chair"] class ends with chair
input[type="button"] specified input type

How to use?

How to use the CSS cheat sheet?

Properties

CSS properties and their brief description
align-contentbehavior of the flex-wrap property
align-itemsalignment for items inside the container
align-selfalignment for the selected item
allchanges all properties
animationbinds an animation to an element
animation-delaydelays animation start
animation-directionreverse animation or in alternate cycles
animation-durationanimation duration in seconds or ms
animation-fill-modestyle when the animation is not playing
animation-iteration-countnumber of an animation replays
animation-namename for the @keyframes animation
animation-play-statethe animation is running or paused
animation-timing-functionspeed curve of an animation
backface-visibilityis element visible when not facing the screen
backgroundall background properties in one declaration
background-attachmentis the background image fixed or scrolls
background-blend-modeblending mode of each background layer
background-clippainting area of the background
background-colorbackground color
background-imagebackground image
background-originwhere the background image is positioned
background-positionstarting position of the background image
background-repeatthe way the background image is repeated
background-sizebackground image size
bordersets all border properties in one line
border-bottombottom border properties in one line
border-bottom-colorcolor of the bottom border
border-bottom-left-radiusborder bottom left radius
border-bottom-right-radiusborder bottom right radius
border-bottom-styleborder bottom style
border-bottom-widthborder bottom width
border-collapseborder collapse
border-colorborder color
border-imagesets an image as border
border-image-outsetborder image area extends beyond the border box
border-image-repeatborder image repeated, rounded or stretched
border-image-slicehow to slice the border image
border-image-sourcepath to the border image
border-image-widthborder image width
border-leftleft border properties in one line
border-left-colorborder left color
border-left-styleborder left style
border-left-widthborder left width
border-radiusborder radius of the four rounded corners
border-rightright border properties in one line
border-right-colorborder right color
border-right-styleborder right style
border-right-widthborder right width
border-spacingborder spacing
border-styleborder style
border-toptop border properties in one line
border-top-colorborder top color
border-top-left-radiusborder top left radius
border-top-right-radiusborder top right radius
border-top-styleborder top style
border-top-widthborder top width
border-widthborder width
bottombottom offset for relative and absolute elements
box-shadowshadow to element
box-sizingbox sizing properties
caption-sideplacement of a table caption
cleardeny floating of an element
clipclip an absolutely positioned element
colortext color
column-countdivide the content in columns
column-fillbalanced fill or not
column-gapgap between the columns
column-ruleseparator between columns, like border
column-rule-colorcolumn rule color
column-rule-stylecolumn rule style
column-rule-widthcolumn rule width
column-span column span
column-widthcolumn width
columnsset column-width and column-count
contentinsert content :before and :after elements
counter-incrementcount sections
counter-resetreset counter
cursorcursor type when element is hovered
directionwriting direction, Arabic is using rtl
displaybox display type
empty-cellshide borders and background on empty table cells
filterimage effects: grayscale, blur, invert etc.
flexitem length, relative to others inside the container
flex-basisinitial length of a flexible item
flex-directiondirection of the flexible items
flex-flowshorthand for flex-direction and flex-wrap
flex-growhow much the item will grow relative other items
flex-shrinkhow to shrink the item relative to other items
flex-wrapwrap flexible items
floatfloat elements left or right
fontall font properties in one line
@font-facedeclare non-web-safe fonts
font-familyfont of the element
font-sizefont size
font-size-adjustcontrol font size if the first declared option is not available
font-stretchwiden or narrow text
font-stylefont style: normal, italic, oblique
font-variantset small-caps
font-weightuse bold or thin characters
hanging-punctuationcan a punctuation mark be placed outside the line box?
heightheight of the element
justify-contentjustifies flexible container's items horizontally if necessary
@keyframesspecifies the animation code
leftleft offset for relative and absolute elements
letter-spacingspace between characters
line-heightline height of text or inline-block elements
list-styleall list properties in one line
list-style-imagereplace the list item marker with an image
list-style-positionlist item markers inside or outside the content flow
list-style-typeset the type of the list item marker
marginset the top, right, bottom and left margins in one line
margin-bottombottom margin
margin-leftleft margin
margin-rightright margin
margin-topmargin top
max-heightmaximum height of element
max-widthmaximum width of element
@mediasee media queries
min-heightminimum height
min-widthminimum width
nav-downwhere to navigate when the the arrow-down button is pressed
nav-indexsets sequential navigation order
nav-leftwhere to navigate when the the arrow-left button is pressed
nav-rightwhere to navigate when the the arrow-right button is pressed
nav-upwhere to navigate when the the arrow-up button is pressed
opacitytransparency level of an element
orderreorder elements in a container
outlinedrow an outer border around elements
outline-coloroutline color
outline-offsetgap between the element and the outline
outline-styleoutline style
outline-widthoutline width
overflowhide, display or scroll if the content overflows its container
overflow-xhorizontal overflow
overflow-yvertical overflow
paddingpadding between the element border and content
padding-bottompadding bottom
padding-leftpadding left
padding-rightpadding right
padding-toppadding top
page-break-afteradds page break after an element
page-break-beforeadds page break before an element
page-break-insideallow page break inside an element
perspectivehow many pixels the 3D element is placed from the view
perspective-originwhere is the 3D element based in the x- and y-axis
positionpositioning type: absolute, fixed, relative, static
quotesset quotation marks to wrap an element
resizedeclare resizable elements
rightright offset for relative and absolute elements
tab-sizetab character space length
table-layouttable layout algorithm
text-alignhorizontal alignment of text
text-align-lasthorizontal alignment of last line of text
text-decorationoverline, underline or line-through the text
text-indentindentation of the first line of the text
text-overflowthe way how overflowed content is marked (ellipsis)
text-shadowtext shadow
text-transformcapitalization of text
toptop offset for relative and absolute elements
transform2D 3D transformation. See widget.
transform-originchanges the position of transformed elements
transform-stylerender nested elements in 3D
transitiontransition properties in one line
transition-delaydelay before transition effect start
transition-durationtransition effect duration
transition-propertywhich CSS property is the transition affecting
transition-timing-functionspeed curve of the transition
unicode-bidishould the text be overridden to support more languages
user-selectdisable user content selection
vertical-alignvertical alignment
visibilityvisibility:hidden elements leave a gap
white-spacehow are white-spaces handled
widthwidth of an element
word-breaktext breaking rules when text reaches the end of the container
word-spacingsize of white space between words
word-wrapbreak long words and wrap onto the next line
z-indexstack order of the element

Color Picker

Click the hex code to pick another color.
 
Color picker:
Text color
Background
Box border
Text shadow
Box shadow

Ads

We show ads to support this free website.

Background

CSS background image and color style generator.
Image URL:
 none 
Position:
X: 
Y: 
Repeat:
Attachment:
Color:
Preview
 

Gradient

Generate gradient CSS setting the colors and the transition effect.

left top -45deg 45deg center
 

Box Shadow

Generate CSS box shadow CSS, setting the desired parameters.
Right:
Down:
Spread:
Blur:
Opacity:
Inset
Color:
Preview
 

Button Generator

CSS button generator.
Color:
Size:
Padding:
Radius:
Change gradient, shadow, font and border in other panels.
 

Ads

We show ads to support this free website.

Text Shadow

Generate CSS text shadow setting the parameters or selecting from the effect gallery.
PREVIEW
Right:
Down:
Blur:
Opacity:
Color:
Neon
Flaming
Lux
Ghost
Candy
Deep
more...
 

Font Generator

Style HTML fonts.
Grumpy wizards make toxic brew for the evil Queen and Jack.
Font:
Georgia
Georgia
Palatino
Times New Roman
Arial
Arial Black
Comic Sans
Impact
Lucida Sans
Tahoma
Trebuchet
Verdana
Courier
Lucida Console
Size:
Letter spc:
Word spc:
Color:
Weight:
Normal
Bold
Decoration:
None
Under
Over
Through
Style:
Normal
Unset
Italic
Oblique
Variant:
Normal
Small caps
Case:
none
upper
lower
capital
 

Transform

CSS transform generator.
Scale:
x
Rotate:
deg
X:
px
Y:
px
Skew X:
deg
Skew Y:
deg
Preview
 

Border / Outline

Interactive CSS border and outline generator.
Preview
Width:
Style:
Color:
Position:
Offset:
 

Border Radius

Generate border radius setting the curve for each corner in pixels.
 

Media Queries

Media queries are used to define different styles for different media types

Syntax

@media not|only mediatype and (media feature) {
CSS Code }
Link external file: 
<link rel="stylesheet" media=mediatype and|not|only (media feature href="mystylesheet.css">

Viewport is 480 pixels or smaller

@media screen and (max-width: 480px) { }

Viewport width smaller OR height smaller

@media screen and (max-width: 600px), (max-height: 500px) {

Print style

@media print { ... }

Night / dark mode

@media (prefers-color-scheme: dark) { ... }

Media types

all, print, screen, speech

Media features

width viewport width
height viewport height
orientation orientation of the viewport
aspect-ratio ratio between width & height
color number of bits per color
color-index number of displayable colors
monochrome color on greyscale device
resolution resolution of the device
scan scanning process of the device
grid device is a grid or bitmap

Reset CSS

Style sheet to reset to assure uniform look in all browsers. To be added at the start of the stylesheet. 
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
body { line-height: 1;}
ol,ul { list-style: none;}
blockquote,q { quotes: none;}
blockquote:before,blockquote:after,q:before,q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}

Ads

We show ads to support this free website.

px - em

Calculate the em value, knowing the parent and required pixel sizes.
Parent:
px
desired px:
px
desired em:
em
↘
HTML
CSS
Apply CSS
Preview

Online Interactive CSS Cheat Sheet

CSS Cheat Sheet contains the most common style snippets: CSS gradient, background, button, font-family, border, radius, box and text shadow generators, color picker and more. All these and other useful web designer tools can be found on a single page.

Test the generated syle sheets clicking the blue arrows pointing down. This will populate the interactive HTML-CSS editor on the bottom of the page with your CSS code and a demo HTML markup, giving you a live preview to test and adjust the code further.

online generators

  • Basics – CSS syntax and how to include them in HTML.
  • Selectors – How to target elements in CSS3.
  • Properties – An updated list of valid properties. Click the bold text to highlight the text!
  • Color picker – Click the blue input field and use your mouse to select another color. The slider on the right side sets the transparency of the selected color. Use the generated code snippets.
  • CSS background generator – Optionally set a background image from URL, set the position, repeat, attachment and color. See the live preview as you adjust the settings then take the generated code when you're satisfied with the result.
  • Gradient generator – Sset two and optionally a third middle transition color to get the CSS gradient code which works almost in every web browser. Change the transition direction, the position of the middle color and choose between RGB or HEX codes.
  • Box shadow generator – Get the CSS code for any inset or outset box shadow, customizing the right and down offset, spread, blur, color and opacity.
  • CSS button generator – create styles for HTML buttons with this panel. Set the size, padding, radius, color and opacity. Adjust the gradient, box shadow, font style and border in other panels.
  • Text shadow generator – Get the CSS code for your text shadow by setting your own color, opacity, blur, right and down shift, or pick a predefined style from the effect gallery.
  • Font style generator – Select font-family, size, letter and word spacing, color, font-weight, decoration, style, variant and case for your font and get the CSS code instantly.
  • CSS transform generator – Scale the size, rotate, shift and skew HTML elements with the transform CSS3 property.
  • CSS border and outline generator – Set the properties for your box border or outline to get the CSS code. Adjust the width, style, color and position of the lines surrounding your box HTML elements.
  • Border radius generator – Apply border radius to the corners of your elements, setting it globally or for each individual corner.
  • Reset CSS – A short code to be added to the top of your stylesheet. This will assure that your page will look the same in all browsers.
  • Media queries – Declare different views for various media types and properties.
  • Pixel - EM calculator – Calculate the PX or EM values, knowing the pixel size of the parent element.
  • Useful links – Look around on other websites we recommend.

Bookmark this CSS cheat sheet with Ctrl + D.

HTML Cheat Sheet is using cookies. | PDF | Terms and Conditions, Privacy Policy
© HTMLCheatSheet.com
➤ ◼